<script lang="ts" setup>
import { useAdminProgramStore } from "../store/adminProgram"
import { apiUrl } from "@/utils/api"

const { addDialog, common, upload } = useAdminProgramStore()

const actionUrl = apiUrl("/api/upload/file")
</script>

<template>
  <t-dialog
    v-model:visible="addDialog.visible"
    :footer="false"
    :onClose="common.clear"
    destroyOnClose
    header="添加应用"
  >
    <t-row style="padding:10px">
      <t-form :data="common.formData" :rules="common.rules" label-align="left" label-width="auto" style="width: 100%"
              @submit="addDialog.add">

        <t-form-item label="应用名称"
                     name="name">
          <t-input v-model="common.formData.name" placeholder="请输入应用名称" />
        </t-form-item>

        <t-form-item label="应用价格"
                     name="price">
          <t-input v-model="common.formData.price" placeholder="请输入应用价格"/>
        </t-form-item>

        <t-form-item label="应用上传"
                     name="download">
          <t-upload
            style="width: 100%;"
            v-model="upload.download.data"
            :action=actionUrl
            :abridge-name="[8, 6]"
            theme="file-input"
            placeholder="未选择文件"
            @fail="upload.fail"
            @remove="upload.download.remove"
            @success="upload.download.success"
            accept="application/x-zip-compressed"
            tips="仅支持上传zip格式的文件"
          ></t-upload>
        </t-form-item>

        <t-form-item label="应用封面"
                     name="img">
          <t-upload
            style="width: 100%"
            v-model="upload.img.data"
            @success="upload.img.success"
            :action=actionUrl
            :abridge-name="[8, 6]"
            theme="image"
            placeholder="未选择文件"
            @fail="upload.fail"
            @remove="upload.img.remove"
            accept="image/jpeg, image/png"
          ></t-upload>
        </t-form-item>

        <t-form-item label="授权状态"
                     name="status">
          <t-switch v-model="common.formData.status" :customValue="[1,0]"/>
        </t-form-item>

        <t-form-item label="验证周期"
                     name="cycle">
          <t-input v-model="common.formData.cycle" placeholder="请输入验证周期，单位/h"/>
        </t-form-item>

        <t-form-item label="应用描述"
                     name="description">
          <t-textarea v-model="common.formData.description" placeholder="请输入应用描述" :autosize="{ minRows: 2, maxRows: 3 }" />
        </t-form-item>

        <t-divider />

        <t-form-item style="display:flex;justify-content: right">
          <t-space>
            <t-button variant="outline" @click="addDialog.visible = false">取消</t-button>
            <t-button :loading="addDialog.loading" theme="primary" type="submit">确定</t-button>
          </t-space>
        </t-form-item>

      </t-form>
    </t-row>
  </t-dialog>
</template>

<style lang="less" scoped>

</style>
